<template>
	<div class="seller" ref="seller">
		<div class="seller-content">
			<div class="overview">
				<h1 class="title">{{seller.name}}</h1>
				<div class="desc">
					<star :size="36" :score="seller.score"></star>
					<span class="text">({{seller.ratingCount}})</span>
					<span class="text">月售{{seller.sellCount}}单</span>
				</div>
				<ul class="remark">
					<li class="block">
						<h2>起送价</h2>
						<div class="content">
							<span class="stress">{{seller.minPrice}}</span>
						</div>
					</li>
					<li class="block">
						<h2>商家配送</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryPrice}}</span>
						</div>
					</li>
					<li class="block">
						<h2>平均配送时间</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryTime}}</span>
						</div>
					</li>
				</ul>
				<div class="favorite" @click="toggleFavorite">
					<i class="iconfont icon-xinheart118" :class="{'active':favorite}"></i>
					<span class="text">{{favoriteText}}</span>
				</div>
			</div>
			<split></split>
			<div class="bulletin">
				<h1 class="title">公告与活动</h1>
				<div class="content-wrapper">
					<p class="content">{{seller.bulletin}}</p>
				</div>
				<ul v-if="seller.supports" class="supports">
					<li class="support-item" v-for="(item,index) of seller.supports">
						<span class="icon" :class="classMap[seller.supports[index].type]"></span>
						<span class="text">{{seller.supports[index].description}}</span>
					</li>
				</ul>
			</div>
			<split></split>
			<div class="pics">
				<h1 class="title">商家实景</h1>
				<div class="pic-wrapper" ref="picWrapper">
					<ul class="pic-list" ref="picList">
						<li class="pic-item" v-for="pic of seller.pics">
							<img :src="pic" alt="" width="120" height="90">
						</li>
					</ul>
				</div>
			</div>
			<split></split>
			<div class="info">
				<h1 class="title">商家信息</h1>
				<ul>
					<li class="info-item" v-for="info of seller.infos">{{info}}</li>
				</ul>
			</div>
			
		</div>
	</div>
</template>

<script>
import star from '@/components/star/star.vue'
import Bscroll from 'better-scroll';
import split from '@/components/split/split';
import {saveToLocal, loadFromLocal} from '@/common/js/store';

export default{
	props:{
		seller:Object
	},
	data(){
		return{
			favorite: (() => {
	            return loadFromLocal(this.seller.id, 'favorite', false);
	        })()
		}
	},
	components:{
		star,
		split
	},
	created(){
		this.classMap=['decrease','discount','special','invoice','guarantee'];
	},
	watch:{
		'seller'() {
	        this.$nextTick(() => {
	            this._initScroll();
	            this._initPics();
	        });
	    }
	},
	mounted(){
		this.$nextTick(() => {
	        this._initScroll()
	        this._initPics()
	        console.log(this.$route.query.id)
        }); 
	},
	computed:{
		favoriteText(){
			return this.favorite?'已收藏':'收藏'
		}
	},
	methods:{
		_initScroll(){
			if (!this.sellerscroll) {
	            this.sellerscroll = new Bscroll(this.$refs.seller, {
	            	click: true
	            });
	        }else{
	          	this.sellerscroll.refresh();
	        }
		},
		_initPics(){
			if (this.seller.pics) {
				let picWidth = 120;
				let margin = 6;
				let width = (picWidth + margin) * this.seller.pics.length - margin;
				this.$refs.picList.style.width = width + 'px';
				this.$nextTick(() => {
					if (!this.picScroll) {
						    this.picScroll = new Bscroll(this.$refs.picWrapper, {
					    	scrollX: true,
						    eventPassthrough: 'vertical'
					    });
					}else{
					    this.picScroll.refresh();
					}
				});
	        }
		},
		toggleFavorite(){
			this.favorite=!this.favorite
			saveToLocal(this.seller.id,'favorite', this.favorite);
		}
	}
}

</script>

<style lang="stylus" scoped>
@import "~@/common/stylus/mixin.styl"

.seller{position: absolute;top: 174px;bottom: 0;left: 0;width: 100%;overflow: hidden;}
.overview{position: relative;padding: 18px;}
.overview .title{margin-bottom: 8px;line-height: 14px;color: rgb(7, 17, 27);font-size: 14px;}
.overview .desc{padding-bottom: 18px;border-bottom:0.5px solid rgba(7, 17, 27, 0.1);font-size: 0;}
.overview .desc .star{display: inline-block;margin-right: 8px;vertical-align: top;}
.overview .desc .text{display: inline-block;margin-right: 12px;line-height: 18px;vertical-align: top;font-size: 10px;color: rgb(77, 85, 93);}
.remark{display: flex;padding-top: 18px;}
.remark .block{flex: 1;text-align: center;border-right:0.5px solid rgba(7, 17, 27, 0.1);}
.remark .block:last-child{border: none;}
.remark .block h2{margin-bottom: 4px;line-height: 10px;font-size: 10px;color: rgb(147, 153, 159);}
.remark .block .content{line-height: 24px;font-size: 10px;color: rgb(7, 17, 27);}
.remark .block .content .stress{font-size: 24px;}

.favorite{position: absolute;width: 50px;right: 11px;top: 18px;text-align: center;}
.favorite .icon-xinheart118{display: block;margin-bottom: 4px;line-height: 24px;font-size: 24px;color: #d4d6d9;}
.favorite .active{color: rgb(240, 20, 20);}
.favorite .text{line-height: 10px;font-size: 10px;color: rgb(77, 85, 93);}

.bulletin{padding:18px 18px 0 18px;}
.bulletin .title{margin-bottom:8px;line-height:14px;}
.content-wrapper{padding:0 12px 16px 12px;border-bottom:0.5px solid rgba(7, 17, 27, 0.1);}
.content-wrapper .content{line-height:24px;font-size:12px;color: rgb(240, 20, 20);}
.supports{}
.supports .support-item{padding: 16px 12px;border-bottom:0.5px solid rgba(7, 17, 27, 0.1);font-size: 0;}
.supports .support-item:last-child{border-bottom:0;}
.supports .support-item .icon{display:inline-block;width:16px;height:16px;vertical-align:top;margin-right:6px;background-size:16px 16px;background-repeat:no-repeat;}
.supports .support-item .decrease
  bg-image('decrease_4')
.supports .support-item .discount
  bg-image('discount_4')
.supports .support-item .guarantee
  bg-image('guarantee_4')
.supports .support-item .invoice
  bg-image('invoice_4')
.supports .support-item .special
  bg-image('special_4')
.supports .support-item .text{line-height:16px;font-size:12px;}

.pics{padding: 18px;}
.title{margin-bottom: 12px;line-height: 14px;color: rgb(7, 17, 27);font-size: 14px;}
.pic-wrapper{width: 100%;white-space: nowrap;overflow:hidden;}
.pic-list{font-size: 0;}
.pic-item{display: inline-block;margin-right: 6px;width: 120px;height: 90px;}
.pic-item:last-child{margin: 0;}
.info{padding: 18px 18px 0 18px;color: rgb(7, 17, 27);}
.info .title{padding-bottom: 12px;line-height: 14px;border-bottom:0.5px solid rgba(7, 17, 27, 0.1);font-size: 14px;}
.info .info-item{padding: 16px 12px;line-height: 16px;border-bottom:0.5px solid rgba(7, 17, 27, 0.1);font-size: 12px;}
.info .info-item:last-child{border-bottom:none;}
              
</style>
